
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { MessageSquare, Heart, Pin } from "lucide-react";

export const TeacherDiscussions = () => {
  return (
    <Tabs defaultValue="teaching-practices" className="w-full">
      <TabsList className="grid w-full grid-cols-4 mb-6">
        <TabsTrigger value="teaching-practices">Teaching Practices</TabsTrigger>
        <TabsTrigger value="ai-education">AI in Education</TabsTrigger>
        <TabsTrigger value="classroom-challenges">Classroom Challenges</TabsTrigger>
        <TabsTrigger value="assessment-strategies">Assessment Strategies</TabsTrigger>
      </TabsList>

      <TabsContent value="teaching-practices">
        <Card className="bg-white dark:bg-gray-800 shadow-sm border">
          <CardHeader>
            <CardTitle className="text-lg font-semibold">Teaching Practices Discussions</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="border border-blue-200 bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
              <div className="flex items-center gap-2 mb-2">
                <Pin className="w-4 h-4 text-blue-600" />
                <Badge className="bg-blue-600 text-white text-xs">Featured</Badge>
              </div>
              <div className="flex space-x-4">
                <Avatar>
                  <AvatarImage src="https://api.dicebear.com/7.x/pixel-art/svg?seed=teacher1" />
                  <AvatarFallback>DR</AvatarFallback>
                </Avatar>
                <div className="flex-1">
                  <div className="flex items-center space-x-2 mb-1">
                    <span className="font-medium text-gray-900 dark:text-gray-100">Dr. Sarah Chen</span>
                    <Badge className="bg-green-600 text-white text-xs">Math Teacher</Badge>
                    <span className="text-gray-500 dark:text-gray-400">· 2 hours ago</span>
                  </div>
                  <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
                    Revolutionary Approach: Project-Based Calculus
                  </h3>
                  <p className="text-gray-700 dark:text-gray-300 mb-3">
                    I've been implementing project-based learning in my AP Calculus classes with incredible results. Students are solving real-world engineering problems while mastering derivatives and integrals. Anyone interested in collaboration?
                  </p>
                  <div className="flex flex-wrap gap-2 mb-3">
                    <Badge variant="secondary" className="text-xs">Project-Based Learning</Badge>
                    <Badge variant="secondary" className="text-xs">Mathematics</Badge>
                    <Badge variant="secondary" className="text-xs">Real-World Applications</Badge>
                  </div>
                  <div className="flex space-x-4 text-gray-500 dark:text-gray-400">
                    <button className="hover:text-blue-600 flex items-center">
                      <MessageSquare className="w-4 h-4 mr-1" />
                      <span>24 Comments</span>
                    </button>
                    <button className="hover:text-green-600 flex items-center">
                      <Heart className="w-4 h-4 mr-1" />
                      <span>67 Likes</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </TabsContent>

      <TabsContent value="ai-education">
        <Card className="bg-white dark:bg-gray-800 shadow-sm border">
          <CardHeader>
            <CardTitle className="text-lg font-semibold">AI in Education Discussions</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="flex space-x-4">
              <Avatar>
                <AvatarImage src="https://api.dicebear.com/7.x/pixel-art/svg?seed=teacher3" />
                <AvatarFallback>MJ</AvatarFallback>
              </Avatar>
              <div className="flex-1">
                <div className="flex items-center space-x-2 mb-1">
                  <span className="font-medium text-gray-900 dark:text-gray-100">Prof. Michael Johnson</span>
                  <Badge className="bg-purple-600 text-white text-xs">Computer Science</Badge>
                  <span className="text-gray-500 dark:text-gray-400">· 1 hour ago</span>
                </div>
                <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
                  Ethical AI Usage Guidelines for Students
                </h3>
                <p className="text-gray-700 dark:text-gray-300 mb-3">
                  I've developed a framework for teaching students about responsible AI usage in academic work. It covers when AI assistance is appropriate and how to cite AI-generated content. Would love feedback from other educators.
                </p>
                <div className="flex flex-wrap gap-2 mb-3">
                  <Badge variant="secondary" className="text-xs">AI Ethics</Badge>
                  <Badge variant="secondary" className="text-xs">Academic Integrity</Badge>
                  <Badge variant="secondary" className="text-xs">Guidelines</Badge>
                </div>
                <div className="flex space-x-4 text-gray-500 dark:text-gray-400">
                  <button className="hover:text-blue-600 flex items-center">
                    <MessageSquare className="w-4 h-4 mr-1" />
                    <span>18 Comments</span>
                  </button>
                  <button className="hover:text-green-600 flex items-center">
                    <Heart className="w-4 h-4 mr-1" />
                    <span>43 Likes</span>
                  </button>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </TabsContent>

      <TabsContent value="classroom-challenges">
        <Card className="bg-white dark:bg-gray-800 shadow-sm border">
          <CardHeader>
            <CardTitle className="text-lg font-semibold">Classroom Challenges Support</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="flex space-x-4">
              <Avatar>
                <AvatarImage src="https://api.dicebear.com/7.x/pixel-art/svg?seed=teacher4" />
                <AvatarFallback>LM</AvatarFallback>
              </Avatar>
              <div className="flex-1">
                <div className="flex items-center space-x-2 mb-1">
                  <span className="font-medium text-gray-900 dark:text-gray-100">Lisa Martinez</span>
                  <Badge className="bg-orange-600 text-white text-xs">Elementary Teacher</Badge>
                  <span className="text-gray-500 dark:text-gray-400">· 3 hours ago</span>
                </div>
                <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
                  Managing Large Class Sizes: Tips That Work
                </h3>
                <p className="text-gray-700 dark:text-gray-300 mb-3">
                  With 32 students in my 4th-grade class, I've had to get creative with classroom management. Here are 5 strategies that have transformed my teaching experience and improved student engagement significantly.
                </p>
                <div className="flex flex-wrap gap-2 mb-3">
                  <Badge variant="secondary" className="text-xs">Classroom Management</Badge>
                  <Badge variant="secondary" className="text-xs">Large Classes</Badge>
                  <Badge variant="secondary" className="text-xs">Elementary</Badge>
                </div>
                <div className="flex space-x-4 text-gray-500 dark:text-gray-400">
                  <button className="hover:text-blue-600 flex items-center">
                    <MessageSquare className="w-4 h-4 mr-1" />
                    <span>31 Comments</span>
                  </button>
                  <button className="hover:text-green-600 flex items-center">
                    <Heart className="w-4 h-4 mr-1" />
                    <span>89 Likes</span>
                  </button>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </TabsContent>

      <TabsContent value="assessment-strategies">
        <Card className="bg-white dark:bg-gray-800 shadow-sm border">
          <CardHeader>
            <CardTitle className="text-lg font-semibold">Assessment Strategies Exchange</CardTitle>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="flex space-x-4">
              <Avatar>
                <AvatarImage src="https://api.dicebear.com/7.x/pixel-art/svg?seed=teacher5" />
                <AvatarFallback>KW</AvatarFallback>
              </Avatar>
              <div className="flex-1">
                <div className="flex items-center space-x-2 mb-1">
                  <span className="font-medium text-gray-900 dark:text-gray-100">Dr. Kevin Wu</span>
                  <Badge className="bg-teal-600 text-white text-xs">Science Teacher</Badge>
                  <span className="text-gray-500 dark:text-gray-400">· 2 hours ago</span>
                </div>
                <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">
                  Formative Assessment Revolution: Real-Time Feedback Tools
                </h3>
                <p className="text-gray-700 dark:text-gray-300 mb-3">
                  I've been experimenting with digital formative assessment tools that give students instant feedback during lab experiments. The improvement in understanding and retention has been remarkable. Happy to share my toolkit!
                </p>
                <div className="flex flex-wrap gap-2 mb-3">
                  <Badge variant="secondary" className="text-xs">Formative Assessment</Badge>
                  <Badge variant="secondary" className="text-xs">Digital Tools</Badge>
                  <Badge variant="secondary" className="text-xs">Real-Time Feedback</Badge>
                </div>
                <div className="flex space-x-4 text-gray-500 dark:text-gray-400">
                  <button className="hover:text-blue-600 flex items-center">
                    <MessageSquare className="w-4 h-4 mr-1" />
                    <span>22 Comments</span>
                  </button>
                  <button className="hover:text-green-600 flex items-center">
                    <Heart className="w-4 h-4 mr-1" />
                    <span>56 Likes</span>
                  </button>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      </TabsContent>
    </Tabs>
  );
};
